<template>
  <div class="VipView">
    <!-- 头部 -->
    <div class="VipView_top">
      <h3>理想家</h3>
      <div>
        <img :src="userImg" alt="" />
        <div>
          <p>{{ userComtent?.user }}</p>
          <p>会员已过期</p>
        </div>
      </div>
    </div>
    <!-- 会员购买 -->
    <div class="VipView_buy">
      <!-- 小标题 -->
      <div class="VipView_buy_title">{{ goods_equity[0]?.title }}</div>
      <!-- 会员类型购买 -->
      <div class="VipView_buy_price">
        <div
          @click="addBtn(item.price, item.background_color)"
          :style="{
            backgroundColor:
              btnPrice === item.price ? '#' + item.background_color : '',
            opacity: 0.6,
          }"
          v-for="item in goods_equity"
          :key="item.id"
        >
          <p>{{ item.title }}</p>
          <p>
            ￥{{ item.price }}<span v-if="item.unit">/{{ item.unit }}</span>
          </p>
        </div>
      </div>

      <!-- 同意事项 -->
      <div class="VipView_buy_yes">* 开通则表示您同意《会员服务协议》</div>

      <!-- 六大权益 -->
      <div class="VipView_equity">
        <p>理想家享 6大权益:</p>
        <div class="VipView_equity_content">
          <div v-for="item in equity_list" :key="item.name">
            <img :src="item.new_icon" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>

      <!-- 购买按钮 -->
      <div class="VipView_buyBtn">￥{{ btnPrice }}享6项权益 加入理想家</div>
    </div>
  </div>
</template>

<script>
import { VipView } from "@/api/request";
export default {
  name: "VipView",
  components: {},
  data() {
    return {
      userImg: "",
      userComtent: "",
      // 理想家会员信息
      goods_equity: [],
      // 六大权益
      equity_list: [],
      // 价格
      btnPrice: 1298,
      background_color: "",
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (!localStorage.getItem("user")) {
        vm.$toast({
          message: "还没登录呢",
          type: "fail",
        });
        next({
          path: "/LoginAndEgistration",
          query: {
            netxUrl: to.fullPath,
          },
        });
      } else {
        next();
      }
    });
  },
  mounted() {
    // 设置本地头像
    this.userImg = localStorage.getItem("userImg");
    // 手机号
    this.userComtent = JSON.parse(localStorage.getItem("user"));
    // 请求vip价格数据
    VipView().then(({ data }) => {
      console.log(data);
      let res = data.data.goods_equity;
      this.goods_equity.push(res[0]);
      this.goods_equity.push(res[1]);
      this.equity_list = data.data.equity_list;
      console.log(this.goods_equity);
      console.log(this.equity_list);
    });
  },

  methods: {
    addBtn(price, backgroundColor) {
      console.log(111);
      this.btnPrice = price;
      this.background_color = backgroundColor;
    },
  },
};
</script>

<style lang="scss" scoped>
.VipView {
  height: 100vh;
  padding: 0 1.25rem;
  background-color: #f1ecf1;
  background-image: linear-gradient(0deg, #f1ecf1 0%, #c76a24 100%);

  .VipView_top {
    h3 {
      font-size: 1.25rem;
      margin: 1.25rem 0;
    }
    > div {
      display: flex;
      align-items: center;
      img {
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
      }
      > div {
        font-size: 0.8125rem;
        margin-left: 10px;
        > p {
          line-height: 1.25rem;
        }
      }
    }
  }
  .VipView_buy {
    .VipView_buy_title {
      font-size: 1rem;
      width: 8.75rem;
      padding: 0.625rem;
      border-bottom: 2px solid black;
      font-weight: bold;
      text-align: center;
    }
    // 会员套餐
    .VipView_buy_price {
      display: flex;
      justify-content: space-around;
      > div {
        width: 7.5rem;
        height: 7.5rem;
        text-align: center;
        padding: 0.625rem;
        margin-top: 1.25rem;
        box-sizing: border-box;
        border: 1px solid #444;
        p {
          line-height: 1.4rem;
        }
        p:nth-child(1) {
          font-size: 0.8125rem;
          font-weight: bold;
        }
        p:nth-child(2) {
          font-size: 1.125rem;
          span {
            font-size: 0.75rem;
          }
        }
      }
    }

    // 开通同意事项
    .VipView_buy_yes {
      color: #ccc;
      font-size: 0.8125rem;
      margin: 1.25rem 0;
    }

    // 六大权益
    .VipView_equity {
      > p {
        font-size: 0.875rem;
        font-weight: bold;
      }
      .VipView_equity_content {
        font-size: 0.8125rem;
        display: flex;
        justify-content: space-between;
        > div {
          width: 40px;
          margin: 1.25rem 0;
          img {
            width: 2.5rem;
            height: 2.5rem;
          }
        }
      }
    }

    // 购买按钮
    .VipView_buyBtn {
      width: 100%;
      height: 2.5rem;
      color: white;
      font-size: 0.8125rem;
      text-align: center;
      line-height: 2.5rem;
      background-color: #080303;
      margin-top: 1.25rem;
    }
  }
}
</style>